<template>
  <div style="margin-left: -5.067vw"><back></back></div>
  <div class="box top">
    <van-popover
      v-model:show="showPopover"
      :actions="actions"
      placement="bottom-start"
      @select="changeName"
    >
      <template #reference>
        <div>{{ showName }}</div>
      </template>
    </van-popover>
  </div>
  <div class="box"><allOrder></allOrder></div>
</template>

<script setup>
import { ref } from "vue";

import { useRouter } from "vue-router";

// 返回按钮
import back from "@/components/Back.vue";

// 引入订单
import allOrder from "@/views/order/AwaitOrderList.vue";

const router = useRouter();

const showPopover = ref(false);
const actions = ref([
  { text: "所有订单", path: "order" },
  { text: "待付款", path: "obligationorder" },
  { text: "待发货", path: "awaitorder" },
  { text: "待收货", path: "receivingorder" },
  { text: "已完成", path: "finishorder" },
  { text: "已失效", path: "failureorder" },
]);

let showName = ref("待发货");

// 改变 showName名字
function changeName(actions) {
  showName.value = actions.text;
  router.push({ path: actions.path });
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 5.067vw;
}
.top {
  margin-bottom: 5vw;
}
.van-popover__content {
  margin-left: 100px;
}
:deep(.van-popover__wrapper) {
  font-size: 6.333vw;
  font-weight: 600;
}
</style>
